@page "/docio/table-of-content"
@inject Microsoft.JSInterop.IJSRuntime JS
@using System.IO
@using Syncfusion.Blazor.Buttons
@using BlazorDemos.Data.FileFormats.DocIO
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment hostingEnvironment
@inherits SampleBaseComponent;

<SampleDescription>
 <p style="font-size:16px">DocIO supports to insert Table of Contents based on custom and default heading styles, include page numbers, hyperlinks to easily navigate to specific topic or heading within the document, specify the outline levels.</p>   
</SampleDescription>
<ActionDescription>
   <p style="font-size:16px">You can draft books in Word document with table of contents that provides outline of the book like chapter, section titles, sub titles with its commencing page number.</p><p><ul style="font-size:16px"><li>You can update or rebuild the Table of Contents in an existing Word document.</li></ul></p>&nbsp;<p style="font-size:16px">More information about the Table of Contents can be found in this <a href="https://help.syncfusion.com/file-formats/docio/working-with-table-of-contents">documentation</a> section.</p>
</ActionDescription>

    <div class="control-section">
        <p style="font-size:16px">Click the button to view the generated Word document. Please note that Microsoft Word Viewer or Microsoft Word is required to view the resultant Word document.</p>

        <div class="checkbox-control">
            <div class="row">
                <SfCheckBox @bind-Checked="@UpdateTOC" Label="Update Table of Contents"></SfCheckBox>
            </div>
        </div>
        <table>
           <tr>
                <td>
                    <h5 class="row" style="font-size:16px">Save As:</h5>
                </td>
                <td>
                    <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6">
                        <SfRadioButton Label="DOC" Name="DOC" Value=@("DOC") @bind-Checked="@documentType"></SfRadioButton>
                    </div>
                </td>
                <td>
                    <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6">
                        <SfRadioButton Label="DOCX" Name="DOCX" Value=@("DOCX") @bind-Checked="@documentType"></SfRadioButton>
                    </div>
                </td>
                <td>
                    <div class="col-xs-12 col-sm-12 col-lg-1 col-md-6">
                        <SfRadioButton Label="WordML" Name="WordML" Value=@("WordML") @bind-Checked="@documentType"></SfRadioButton>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <div class="button-section">
                        <div id="button-control">
                            <div class="row">
                                <div>                                  
                                    <SfButton @onclick="GenerateDocument">Generate Document</SfButton>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

<style>
    .control-section .row {
        margin: 10px 0;
    }
</style>

@code {
    MemoryStream documentStream;
    string documentType = "DOCX";
    bool UpdateTOC = false;

    /// <summary>
    /// UpdateTOC of the Word document
    /// </summary>
    public async Task GenerateDocument(MouseEventArgs args)
    {
        TableofContentService service = new TableofContentService(hostingEnvironment);
        documentStream = service.TableofContent(documentType, "Generate Document", UpdateTOC);
        if (documentType == "DOC")
            await JS.SaveAs("Table of Contents.doc", documentStream.ToArray());
        else if (documentType == "WordML")
            await JS.SaveAs("Table of Contents.xml", documentStream.ToArray());
        else
            await JS.SaveAs("Table of Contents.docx", documentStream.ToArray());
    }
}